<template>
  <div class="body">
    <div class="market-region">
      <div class="market-article">
        <div class="article-list">
          <div
            v-for="item in marketArticleList"
            :key="item.id"
            class="article"
            @click="goDetail(item.id)"
          >
            <div class="article-info">
              <div class="article-title">{{ item.title }}</div>
              <div class="article-time">{{ item.startTime }}</div>
              <div style="clear:both" />
            </div>
            <div class="article-summary">{{ item.summary }}</div>

          </div>
        </div>
      </div>
      <div class="marketPrice">
        <marketPriceTrend />
      </div>
    </div>
    <div class="price-table-region">
      <el-select
        v-model="flag"
        class="select-region"
        @change="onFlagChange"
      >
        <el-option
          v-for="item in flagOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          placeholder="价格类型"
        />
      </el-select>
      <el-table
        clsss="table-list"
        :data="priceList"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          prop="time"
          label="日期"
        />
        <el-table-column
          prop="name"
          label="产品名"
        />
        <el-table-column
          prop="price"
          label="价格"
        />
        <el-table-column
          prop="unit"
          label="单位"
        />
        <el-table-column
          prop="originPlace"
          label="产地"
        />
        <el-table-column
          prop="market"
          label="市场"
        />
        <el-table-column
          v-if="flag==3"
          prop="specification"
          label="规格"
        />

      </el-table>
      <el-pagination
        class="pageination"
        :current-page="pageNum"
        :total="total"
        layout="sizes, prev, pager, next, jumper, ->, slot"
        prev-text="上一页"
        next-text="下一页"
        hide-on-single-page
        background
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
import { getProductPricePage } from '@/api/bigdata/productPrice'
import { getArticlePage } from '@/api/article/article'
import { flagList } from '@/config/dict/bigdata'
import marketPriceTrend from './components/marketPriceTrend.vue'
export default {
  components: { marketPriceTrend },
  data() {
    return {
      priceList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      flagOptions: flagList,
      flag: 2,
      marketArticleList: []
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      getArticlePage({
        pageNum: 1,
        pageSize: 4,
        categoryId: 4
      }).then(res => {
        this.marketArticleList = res.data.records
      })
      getProductPricePage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        flag: this.flag
      }).then(res => {
        this.priceList = res.data.records
        this.total = res.data.total
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.load()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageNum = 1
      this.load()
    },
    onFlagChange(flag) {
      this.flag = flag
      this.pageNum = 1
      this.load()
    },
    goDetail(id) {
      this.$router.push(`/bigdata-articleDetail?id=${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  width: 87%;
  margin:0 auto;
  padding: 20px 0;
}

.market-region {
  display: flex;

  .market-article {
    width: 49%;
    margin: 0.5%;
    height: 500px;
    padding-top: 20px;
    padding-right: 50px;

    .article {
      border-bottom: 1px solid #999;
      height: 120px;
      cursor: pointer;

      .article-title {
        font-size: 17px;
        font-weight: 600;
        max-width: 70%;
        word-break: break-all;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin: 10px;
        float: left;
      }

      .article-time {
        margin-top: 10px;
        color: #666;
        text-align: right;
        float: right;
        font-size: 14px;
      }

      .article-summary {
        font-size: 15px;
        line-height: 30px;
        word-break: break-all;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin: 10px;
        color: #666666;
      }
    }
  }
}

.marketPrice {
  width: 49%;
  margin: 0.5%;
  height: 500px;
  padding-top: 20px;
  padding-right: 50px;
}

.select-region {
  margin: 10px 0;
}

.pageination {
  margin-top: 20px;
}
</style>
